'use strict'
const { View } = window.QUI
import Swiper from '../../utils/swiper1.min'
import style from './css.css'
// window.dataSource = dataSource
class useBalance extends React.Component {
  constructor (props) {
    super(props)
    this.state = {}
  }

  componentDidMount () {
    this.swiper = new Swiper('.swiper-container', {
      pagination: '.swiper-pagination',
      paginationClickable: true,
      effect: 'coverflow',
      autoplay: 3000,
      coverflow: {
        rotate: 0,
        stretch: 0,
        depth: 100,
        modifier: 5,
        slideShadows: false
      }
    })
  }

  _renderSwiperWrap = this._renderSwiperWrap.bind(this)
  _renderSwiperWrap () {
    const { taskSwiper = {}} = this.props
    if (taskSwiper.length > 1) {
      return (
        <div className="swiper-container">
          <div className="swiper-wrapper">
            {this._renderSwiperList()}
          </div>
          <div className={'swiper-pagination'} style={{ bottom: '3px' }}></div>
        </div>
      )
    }
    else {
      return this._renderSwiperList()
    }
  }

  _renderSwiperList = this._renderSwiperList.bind(this)

  _renderSwiperList () {
    // console.log(this.props)
    const { taskSwiper = {}} = this.props

    return taskSwiper.map((item, index) => {
      if (taskSwiper.length > 1) {
        return (
          <div className="swiper-slide" key={index} onClick={() => this._handleLink(item.target)}>
            <View
              className={style.swiperImgShow}
              tapStopPropagation={true}
              style={{ backgroundImage: `url(${item.pic_url})` }}></View>
          </div>
        )
      }
      else {
        return (
          <View
            tap ={() => this._handleLink(item.target)}
            className={style.swiperImgShow}
            tapStopPropagation={true}
            style={{ backgroundImage: `url(${item.pic_url})` }}></View>
        )
      }
    })
  }
  _handleLink (link) {
    window.location.href = link
  }

  render () {
    return (
      <View className={ style.taskSwiper }>
        {this._renderSwiperWrap()}
      </View>
    )
  }
}
export default useBalance

// 'use strict'
// const { View } = window.QUI
// import Swiper from '../../utils/swiper1.min'
// import style from './css.css'
// // window.dataSource = dataSource
// class useBalance extends React.Component {
//   constructor (props) {
//     super(props)
//     this.state = {}
//   }

//   componentDidMount () {
//     this.swiper = new Swiper('.swiper-container', {
//       pagination: '.swiper-pagination',
//       paginationClickable: true,
//       effect: 'coverflow',
//       autoplay: 3000,
//       coverflow: {
//         rotate: 0,
//         stretch: 0,
//         depth: 100,
//         modifier: 5,
//         slideShadows: false
//       }
//     })
//   }

//   _renderSwiperList = this._renderSwiperList.bind(this)

//   _renderSwiperList () {
//     // console.log(this.props)
//     const { taskSwiper = {}} = this.props
//     return taskSwiper.map((item, index) => {
//       return (
//         <div className={'swiper-slide'} key={index}>
//           <View
//             tap = {() => this._handleLink(item.target)}
//             className={style.swiperImgShow}
//             style={{ backgroundImage: `url(${item.pic_url})` }}></View>
//         </div>
//       )
//     })
//   }

//   _handleLink (link) {
//     window.location.href = link
//   }

//   render () {
//     return (
//       <View className={ style.taskSwiper }>
//         <div className="swiper-container">
//           <div className={'swiper-wrapper'}>
//             {this._renderSwiperList()}
//           </div>
//           <div className={'swiper-pagination'} style={{ bottom: '3px' }}></div>
//         </div>
//       </View>
//     )
//   }
// }
// export default useBalance
